

.app-page-tabs-container {
  width: 100%;
  height: var(--layout-page-tabs-height);
  display: -webkit-flex;
  display: flex;
  align-items: center;
  background: var(--layout-page-tabs-bg);
  -webkit-box-shadow: var(--layout-page-tabs-shadow);
  -moz-box-shadow: var(--layout-page-tabs-shadow);
  box-shadow: var(--layout-page-tabs-shadow);

  .app-page-tabs-item {
    display: inline-block;
    position: relative;
    height: calc(var(--layout-page-tabs-height) - 10px);
    line-height: calc(var(--layout-page-tabs-height) - 14px);
    border: var(--border-width-base) var(--border-style-base) var(--layout-page-tabs-item-bor-color);
    color: var(--layout-page-tabs-color);
    background: var(--layout-page-tabs-item-bg);
    padding: 0 8px;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: var(--layout-page-tabs-border-radius);
    font-weight: 500;

    &:first-of-type {
      margin-left: 0;
    }

    :deep(.icon-file) {
      font-size: 14px;
      margin-right: 2px;
    }

    :deep(.icon-close) {
      font-size: 15px;
      margin-left: 8px;
      font-weight: 600;

      &:hover {
        color: var(--layout-page-tabs-close-color);
      }
    }
  }

  .app-page-tabs-wrapper {
    height: var(--layout-page-tabs-height);
    width: ~'calc(100% - 124px)';
    margin-left: 5px;
    margin-right: 5px;

    .router-link-exact-active {
      background: var(--layout-page-tabs-active-bg);
      color: var(--layout-page-tabs-active-color);
      border-color: var(--layout-page-tabs-active-bor-color);
      border-radius: var(--layout-page-tabs-border-radius);
    }
  }

  .app-page-tabs-btns {
    height: calc(var(--layout-page-tabs-height) - 10px);
    line-height: calc(var(--layout-page-tabs-height) - 12px);
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-base) var(--border-style-base) var(--layout-page-tabs-item-bor-color);
    border-radius: var(--border-radius-base);

    .app-page-tabs-move-to {
      color: var(--layout-page-tabs-color);
      background: var(--layout-page-tabs-item-bg);
      cursor: pointer;
      border-right: var(--border-width-base) var(--border-style-base)
        var(--layout-page-tabs-item-bor-color);
      padding-left: 3px;
      padding-right: 3px;

      &:hover {
        color: var(--layout-page-tabs-btn-hov-color);
      }
    }

    .app-page-tabs-more {
      width: 60px;
      position: relative;

      .app-page-tabs-more-btn {
        width: 60px;
        border: 0;
        color: var(--layout-page-tabs-color);
        background: var(--layout-page-tabs-item-bg);
        font-size: 14px;
        padding-left: 7px;
        padding-right: 5px;
        cursor: pointer;

        &:hover {
          color: var(--layout-page-tabs-btn-hov-color);
        }

        :deep(.icon) {
          font-size: 14px;
        }
      }
    }
  }
}
